<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>2_受控组件</title>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- react核心库 -->
	<script src="../React-js/react.development.js"></script>
	<!-- 操作DOM支持库 -->
	<script src="../React-js/react-dom.development.js"></script>
	<!-- babel转换库  jsx-js -->
	<script src="../React-js/babel.min.js"></script>
	<script type="text/babel">

		//创建组件
		class Login extends React.Component {

			//初始化状态
			state = {
				username: '', //用户名
				password: '' //密码
			}

			//保存用户名到状态中
			saveUsername = (event) => {
				this.setState({ username: event.target.value })
			}

			//保存密码到状态中
			savePassword = (event) => {
				this.setState({ password: event.target.value })
			}

			//表单提交的回调
			handleSubmit = (event) => {
				// event.preventDefault() //阻止表单提交  受控组件
				const { username, password } = this.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}

			render() {
				return (
					<form onSubmit={this.handleSubmit}>
						用户名：<input onChange={this.saveUsername} type="text" name="username" style={{ marginRight: '20px' }} />
						<br />
						密码：<input onChange={this.savePassword} type="password" name="password" style={{ marginRight: '20px' }} />
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login />, document.getElementById('test'))
	</script>
</body>

</html>